import React from 'react';
import { Class } from '../../../shared/models';
import { useData } from '../../../shared/DataContext';
import './ClassDetailModal.css';
interface ClassDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  classData: Class | null;
}

const ClassDetailModal: React.FC<ClassDetailModalProps> = ({
  isOpen,
  onClose,
  classData
}) => {
  const { students, stageOptions, academyOptions } = useData();
  
  // 获取阶段标签
  const getStageLabel = (value: string) => {
    const stageOption = stageOptions.find(option => option.value === value);
    return stageOption?.label || value;
  };
  
  // 获取学院标签
  const getAcademyLabel = (value: string) => {
    const academyOption = academyOptions.find(option => option.value === value);
    return academyOption?.label || value;
  };

  // 获取科目标签
  const getSubjectLabel = (value: string) => {
    const subjectMap: Record<string, string> = {
      'chinese': '语文',
      'math': '数学',
      'english': '英语',
      'physics': '物理',
      'chemistry': '化学',
      'biology': '生物',
      'history': '历史',
      'geography': '地理',
      'politics': '政治'
    };
    return subjectMap[value] || value;
  };

  // 获取状态标签
  const getStatusLabel = (value: string) => {
    const statusMap: Record<string, string> = {
      'active': '在读',
      'graduated': '已毕业',
      'disbanded': '已解散',
      'pending': '待审核'
    };
    return statusMap[value] || value;
  };

  // 获取关联的学生列表 - 只显示激活状态的学生
  const getClassStudents = () => {
    return students.filter(student => student.classId === classData.id && student.status === 'active');
  };

  // 处理模态框点击外部关闭
  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  if (!isOpen || !classData) return null;

  return (
    <div className="modal-overlay" onClick={handleOverlayClick}>
      <div className="modal">
        <div className="modal-header">
          <h2>班级详情 - {classData.name}</h2>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          <div className="detail-info">
            <div className="detail-item">
              <span className="detail-label">班级编号</span>
              <span className="detail-value">{classData.id}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">班级名称</span>
              <span className="detail-value">{classData.name}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">阶段</span>
              <span className="detail-value">{getStageLabel(classData.stage)}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">学院</span>
              <span className="detail-value">{getAcademyLabel(classData.academy)}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">状态</span>
              <span 
                className="detail-value"
                style={{
                  padding: '4px 8px',
                  borderRadius: '4px',
                  fontSize: '12px',
                  display: 'inline-block',
                  color: classData.status === 'active' ? '#52c41a' : 
                         classData.status === 'graduated' ? '#1890ff' :
                         classData.status === 'disbanded' ? '#ff4d4f' : '#faad14',
                  backgroundColor: classData.status === 'active' ? '#f6ffed' : 
                                   classData.status === 'graduated' ? '#e6f7ff' :
                                   classData.status === 'disbanded' ? '#fff2f0' : '#fffbe6'
                }}
              >
                {getStatusLabel(classData.status)}
              </span>
            </div>
            <div className="detail-item">
              <span className="detail-label">班主任ID</span>
              <span className="detail-value">{classData.headTeacherId || '未设置'}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">班主任姓名</span>
              <span className="detail-value">{classData.headTeacherName || '未设置'}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">学生人数</span>
              <span className="detail-value">{getClassStudents().length}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">创建时间</span>
              <span className="detail-value">{classData.createdAt}</span>
            </div>
            <div className="detail-item">
              <span className="detail-label">更新时间</span>
              <span className="detail-value">{classData.updatedAt}</span>
            </div>
          </div>

          <div className="detail-subjects">
            <span className="detail-label">开设科目</span>
            <div className="subject-list">
              {classData.subjects && classData.subjects.length > 0 ? (
                classData.subjects.map(subject => (
                  <span key={subject} className="subject-item">
                    {getSubjectLabel(subject)}
                  </span>
                ))
              ) : (
                <span className="detail-value" style={{ color: '#999' }}>未设置科目</span>
              )}
            </div>
          </div>

          {/* 显示班级关联的学生列表 */}
          <div className="students-section">
            <h3 className="section-title">学生列表</h3>
            <div className="student-grid">
              {getClassStudents().length > 0 ? (
                getClassStudents().map(student => (
                  <div key={student.id} className="student-card">
                    <div className="student-info">
                      <span className="student-name">{student.name}</span>
                      <span className="student-id">学号: {student.studentId}</span>
                    </div>
                    <div className="student-details">
                      <span>性别: {student.gender === 'male' ? '男' : '女'}</span>
                      <span>出生日期: {student.dateOfBirth ? new Date(student.dateOfBirth).toLocaleDateString('zh-CN') : '-'}</span>
                      <span>状态: {student.status === 'active' ? '在读' : 
                              student.status === 'suspended' ? '休学' : 
                              student.status === 'graduated' ? '毕业' : 
                              student.status === 'transferred' ? '转学' : '未知'}</span>
                    </div>
                    {student.phoneNumber && (
                      <div className="student-contact">联系方式: {student.phoneNumber}</div>
                    )}
                  </div>
                ))
              ) : (
                <div className="no-students">暂无学生</div>
              )}
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="cancel-btn" onClick={onClose}>关闭</button>
        </div>
      </div>
    </div>
  );
};

export default ClassDetailModal;